<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>查询书籍</title>
</head>
<body>
<form id="app">
    <!-- 输入区域 -->
    <input type="text" v-model="book.ID" placeholder="请输入书籍ID">
    <input type="button" value="查询" @click="selectBook(book.ID)" >
    <input type="button" value="重置" @click="resetForm">

    <!-- 表格区域（正确嵌套） -->
    <table>
        <tr>
            <th>ID</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版日期</th>
            <th>出版社</th>
            <th>价格</th>
            <th>状态</th>
        </tr>

        <tr>
            <td>{{ book.ID }}</td>
            <td>{{ book.name }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.date }}</td>
            <td>{{ book.press }}</td>
            <td>{{ book.price }}</td>
            <td>{{ book.statu == 1 ? "在馆" : "已借出" }}</td>
        </tr>
    </table>
</form>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data(){
            return{
                book:{
                    ID:''
                }
            }
        },
        methods:{
            selectBook(ID){
                axios({
                    method: 'get',
                    url: '/dem1/book/'+ID
                }).then(response => {
                    this.book = response.data; // 接收单条结果
                });
            },
            resetForm(){ // 自定义重置
                this.book = { ID: '' };
            }
        }
    }).mount("#app")
</script>

</html>